<template>
  <el-dialog
    v-if="visible"
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :width="width"
    center
  >
    <el-form
      ref="bankDataForm"
      v-loading="loading"
      :model="bankData"
      :rules="bankRules"
      :label-width="bankItemLabelWidth"
    >
      <el-row>
        <el-col :span="span">
          <el-form-item label="收款账号：" prop="receivingBankAccount">
            <el-input v-model.trim="bankData.receivingBankAccount" placeholder="请输入收款账号" />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item label="币种：" prop="currencyCode">
            <el-select
              v-model="bankData.currencyCode"
              filterable
              clearable
              placeholder="请选择币种"
              style="width: 100%"
            >
              <el-option
                v-for="item in currency"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item label="开户行：" prop="bankName">
            <el-input v-model="bankData.bankName" placeholder="请输入开户行" />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item label="银行地址：" prop="bankAddress">
            <el-input v-model="bankData.bankAddress" placeholder="请输入银行地址" />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item label="SWIFT：" prop="bankSwift">
            <el-input v-model.trim="bankData.bankSwift" placeholder="请输入SWIFT" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="medium" :loading="confirmLoading" @click="confirmDialogData">确 定</el-button>
      <el-button size="medium" @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex'
const bankAccountValidator = (rule, value, callback) => {
  const reg = /^[0-9]+$/
  if (!value) {
    return callback(new Error('请输入收款账号'))
  }
  if (value.length > 100) {
    return callback(new Error('收款账号不能超过100个字符'))
  }
  if (!reg.test(value)) {
    return callback(new Error('收款账号必须为数字'))
  }
  return callback()
}

const bankNameValidator = (rule, value, callback) => {
  if (!value || (value && value.trim() === '')) {
    return callback(new Error('请输入开户行'))
  }
  if (value.length > 100) {
    return callback(new Error('开户行不能超过100个字符'))
  }
  return callback()
}

const bankAddressValidator = (rule, value, callback) => {
  if (!value || (value && value.trim() === '')) {
    return callback(new Error('请输入银行地址'))
  }
  if (value.length > 200) {
    return callback(new Error('银行地址不能超过200个字符'))
  }
  return callback()
}

const bankSwiftValidator = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入SWIFT'))
  }
  if (value.length > 100) {
    return callback(new Error('SWIFT不能超过100个字符'))
  }
  return callback()
}

export default {
  props: {
    title: {
      type: String,
      default: '新增银行卡'
    },
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: () => {}
    },
    bankItemLabelWidth: {
      type: String,
      default: '150px'
    },
    span: {
      type: Number,
      default: 12
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    }
  },
  data() {
    return {
      bankRules: {
        receivingBankAccount: [{ required: true, validator: bankAccountValidator, trigger: 'blur' }],
        currencyCode: [{ required: true, message: '请选择币种', trigger: 'change' }],
        bankName: [{ required: true, validator: bankNameValidator, trigger: 'blur' }],
        bankAddress: [{ required: true, validator: bankAddressValidator, trigger: 'blur' }],
        bankSwift: [{ required: true, validator: bankSwiftValidator, trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState({
      currency: state => state.base.currency
    }),
    bankData: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.getDictionary()
  },
  methods: {
    ...mapActions({ getBaseDataList: 'base/getBaseDataList' }),
    confirmDialogData() {
      this.$refs.bankDataForm.validate(valid => {
        if (valid) {
          this.$emit('saveData', this.bankData)
        } else {
          return false
        }
      })
    },
    closeDialog() {
      this.$emit('closeBankDialog')
    },
    getDictionary() {
      this.getBaseDataList({ type: 'currency' })
    }
  }
}
</script>

<style lang="scss" scoped></style>
